آموزش React JS- راهنمای کامل برای توسعه وب Frontend [2022]

سرفصل ها و درس ها

HTML5 - اصول اولیه تا پیشرفته HTML5 - Basics to Advanced

• HTML - مقدمه HTML - Introduction

• HTML - راه اندازی ویرایشگر کد HTML - Code Editor Setup

• HTML - ساختار یک سند HTML HTML - Structure of an HTML Document

• HTML - اضافه کردن عنوان در یک صفحه وب HTML - Adding Heading in a Webpage

• HTML - اضافه کردن پاراگراف در یک صفحه وب HTML - Adding Paragraph in a Webpage

• HTML - اضافه کردن تصاویر در صفحات وب HTML - Adding Images in Web Pages

• HTML - ایجاد لیست های مرتب و نامرتب HTML - Creating Ordered and Unordered Lists

• HTML - اضافه کردن سبک ها و قالب بندی عناصر HTML HTML - Adding Styles and Formatting HTML Elements

• HTML - Block and Inline Display Values HTML - Block and Inline Display Values

• HTML - اضافه کردن سبک های گروه با استفاده از ویژگی Class HTML - Adding group styles using Class attribute

• HTML - اضافه کردن هایپرلینک در صفحات وب HTML - Adding HyperLinks in Webpages

• HTML - استفاده از پیوندها برای اتصال صفحات وب HTML - Using links to connect Webpages

• HTML - شناسایی منحصر به فرد عنصر HTML با استفاده از ویژگی ID HTML - Uniquely Identify HTML Element by using ID attribute

• HTML - مینی پروژه 1: صفحه وب غذاهای مورد علاقه HTML - Mini-Project 1: Favorite Foods Webpage

• HTML - مینی پروژه 1: راه حل HTML - Mini-Project 1: Solution

• HTML - چه چیزی HTML5 را بهتر می کند؟ HTML - What makes HTML5 Better?

• HTML - عناصر و ویژگی های جدید در HTML5 HTML - New Elements & Attributes in HTML5

• HTML - طراحی ساختار صفحه با استفاده از عناصر معنایی HTML - Design Page Structure Using Semantic Elements

• HTML - عناصر معنایی جدید: <جزئیات> و <خلاصه> HTML - New Semantic Elements: <details> and <summary>

• HTML - مقدمه ای بر جداول HTML - Introduction to Tables

• HTML - سطرها و ستون های جدول را باز کنید HTML - Span table rows and columns

• HTML - طراحی طرح‌بندی با استفاده از جداول HTML - Design layouts using Tables

• جداول HTML - تمرین مسئله 1 HTML Tables - Practice Problem 1

• جداول HTML - تمرین مسئله 1: راه حل HTML Tables - Practice Problem 1: Solution

• HTML - مقدمه ای بر فرم ها HTML - Introduction to Forms

• HTML - انواع ورودی فرم HTML - Form Input Types

• HTML - اضافه کردن سبک به فرم ها HTML - Adding Styles to Forms

• HTML - روش‌های فرم: GET و POST HTML - Form Methods: GET and POST

• HTML - عناصر فرم جدید HTML - New Form Elements

• HTML - انواع ورودی فرم جدید HTML - New Form Input Types

• HTML - ویژگی های ورودی فرم جدید HTML - New Form Input Attributes

• HTML - اعتبار سنجی فرم HTML - Form Validation

• HTML - فرم ها تمرین مسئله 1 HTML - Forms Practice Problem 1

• HTML - فرم ها تمرین مسئله 1 - راه حل HTML - Forms Practice Problem 1 - Solution

• HTML - افزودن فیلم ها در یک صفحه وب HTML - Adding Videos in a Webpage

• HTML - افزودن صدا در یک صفحه وب HTML - Adding Audio in a Webpage

• HTML - عنصر <embed> HTML - The <embed> element

• HTML - فیلم های یوتیوب را در یک صفحه وب جاسازی کنید HTML - Embed Youtube Videos in a Webpage

• HTML - مقدمه ای بر SVG HTML - Introduction to SVG

• HTML - با استفاده از SVG دایره ایجاد کنید HTML - Create circle using SVG

• HTML - یک مستطیل با استفاده از SVG ایجاد کنید HTML - Create a rectangle using SVG

• HTML - پروژه نهایی HTML - Final Project

CSS3 - اصول اولیه تا پیشرفته CSS3 - Basics to Advanced

• CSS - مقدمه CSS - Introduction

• CSS - چگونه از CSS استفاده کنیم؟ CSS - How to use CSS?

• CSS - یک ظاهر طراحی متن CSS - Styling Text

• CSS - افزودن مرزها CSS - Adding Borders

• CSS - حاشیه و پد CSS - Margin and Padding

• CSS - لیست های استایل CSS - Styling Lists

• CSS - پیوندهای سبک CSS - Styling Links

• CSS - دکمه های یک ظاهر طراحی شده CSS - Styling Buttons

• CSS - اضافه کردن آیکون ها CSS - Adding Icons

• CSS - کار با مقادیر نمایشگر CSS - Working with Display Values

• CSS - مقدار نمایش: Inline-Block CSS - Display value: Inline-Block

• CSS - تعیین موقعیت عناصر HTML قسمت 1 CSS - Positioning HTML Elements Part-1

• CSS - تعیین موقعیت عناصر HTML قسمت 2 CSS - Positioning HTML Elements Part-2

• CSS - مدیریت سرریز محتوا CSS - Handling Content Overflow

• CSS - عناصر HTML شناور CSS - Floating HTML Elements

• CSS - مدل جعبه CSS - Box Model

• CSS - اندازه جعبه CSS - Box Sizing

• CSS - اضافه کردن سایه ها CSS - Adding Shadows

• CSS - Combinators Part-1 CSS - Combinators Part-1

• CSS - Combinators Part-2 CSS - Combinators Part-2

• CSS - کلاس های شبه قسمت 1 CSS - Pseudo Classes Part-1

• CSS - کلاس های شبه قسمت 2 CSS - Pseudo Classes Part-2

• CSS - عناصر شبه CSS - Pseudo Elements

• CSS - اضافه کردن پس زمینه CSS - Adding Backgrounds

• CSS - گرادیان ها CSS - Gradients

• CSS - مدیریت سرریز متن CSS - Handling Text Overflow

• CSS - تمرین مشکل-1: Google.com را شبیه به هم بسازید CSS - Practice Problem-1: Create Google.com Look-Alike

• CSS - تمرین مشکل-1: راه حل شبیه به ظاهر Google.com ایجاد کنید CSS - Practice Problem-1: Create Google.com Look-Alike Solution

• CSS - مقدمه ای بر طراحی وب سایت واکنش گرا CSS - Introduction to Responsive Web Design

• CSS - Viewport CSS - Viewport

• CSS - اندازه پویا CSS - Dynamic Size

• CSS - مقدمه ای بر پرسش های رسانه ای CSS - Introduction to Media Queries

• CSS - طراحی پاسخگو صفحه وب با استفاده از پرسش های رسانه ای CSS - Responsive Webpage Design using Media Queries

• CSS - Flex Layout CSS - Flex Layout

• CSS - ویژگی های کانتینر فلکس CSS - Flex Container Properties

• CSS - موارد فلکس را تراز کنید CSS - Align Flex Items

• CSS - ویژگی های مورد فلکس CSS - Flex Item Properties

• CSS - نوار بالا را با استفاده از Flex طراحی کنید CSS - Design Topbar using Flex

• CSS - گرید پاسخگو با استفاده از Flex CSS - Responsive Grid using Flex

• CSS - Transform Property CSS - Transform Property

• CSS - تراز کردن عناصر با استفاده از Transform Property CSS - Align Elements using Transform Property

• CSS - ویژگی انتقال CSS - Transition Property

• CSS - ویژگی انیمیشن CSS - Animation Property

• CSS - Flying Rocket Animation با استفاده از Animation Property CSS - Flying Rocket Animation using Animation Property

• CSS - مقدمه ای بر Grid Layout CSS - Introduction to Grid Layout

• CSS - ویژگی های کانتینر شبکه CSS - Grid Container Properties

• CSS - ویژگی های آیتم گرید CSS - Grid Item Properties

• CSS - بیانیه نهایی مشکل پروژه CSS - Final Project Problem Statement

جاوا اسکریپت - اصول اولیه تا پیشرفته Javascript - Basics to Advanced

• جاوا اسکریپت - مقدمه JavaScript - Introduction

• جاوا اسکریپت - مقدمه ای بر متغیرها، عملگرها و عبارات JavaScript - Introduction to Variables, Operators and Expressions

• جاوا اسکریپت - متغیرها JavaScript - Variables

• جاوا اسکریپت - اعداد JavaScript - Numbers

• جاوا اسکریپت - توابع شماره داخلی JavaScript - In-Built Number Functions

• جاوا اسکریپت - رشته ها JavaScript - Strings

• جاوا اسکریپت - توابع رشته داخلی قسمت 1 JavaScript - In-Built String Functions Part-1

• جاوا اسکریپت - توابع رشته داخلی قسمت 2 JavaScript - In-Built String Functions Part-2

• جاوا اسکریپت - مقادیر تهی و تعریف نشده JavaScript - Null and Undefined Values

• جاوا اسکریپت - عبارت شرطی: If-else JavaScript - Conditional Statement: If-else

• جاوا اسکریپت - عبارت شرطی: سوئیچ JavaScript - Conditional Statement: Switch

• جاوا اسکریپت - عملگرهای حسابی JavaScript - Arithmetic Operators

• جاوا اسکریپت - اپراتورهای واگذاری JavaScript - Assignment Operators

• جاوا اسکریپت - مقایسه و عملگرهای منطقی JavaScript - Comparison and Logical Operators

• جاوا اسکریپت - اجبار نوع ضمنی JavaScript - Implicit Type Coercion

• جاوا اسکریپت - اجبار نوع صریح JavaScript - Explicit Type Coercion

• جاوا اسکریپت - اشیاء JavaScript - Objects

• جاوا اسکریپت - آرایه ها قسمت 1 JavaScript - Arrays Part 1

• جاوا اسکریپت - آرایه ها قسمت 2 JavaScript - Arrays Part 2

• جاوا اسکریپت - مقدمه ای بر حلقه ها JavaScript - Introduction to Loops

• جاوا اسکریپت - حلقه while JavaScript - While Loop

• جاوا اسکریپت - برای حلقه ها JavaScript - For Loops

• جاوا اسکریپت - توابع JavaScript - Functions

• جاوا اسکریپت - آرگومان های تابع JavaScript - Function Arguments

• جاوا اسکریپت - محدوده و محیط JavaScript - Scope and Environment

• جاوا اسکریپت - بالا بردن متغیر JavaScript - Variable Hoisting

• جاوا اسکریپت - افزایش عملکرد JavaScript - Function Hoisting

• جاوا اسکریپت - مقدمه ای بر DOM JavaScript - Introduction to DOM

• جاوا اسکریپت - عناصر HTML را انتخاب کنید JavaScript - Select HTML Elements

• جاوا اسکریپت - انتخابگرهای پرس و جو JavaScript - Query Selectors

• جاوا اسکریپت - عناصر HTML را به روز کنید JavaScript - Update HTML Elements

• جاوا اسکریپت - به روز رسانی سبک ها JavaScript - Updating Styles

• جاوا اسکریپت - معرفی رویدادها JavaScript - Intro to Events

• جاوا اسکریپت - اضافه کردن و حذف کلاس ها از عناصر HTML JavaScript - Add and Remove Classes from HTML Elements

• جاوا اسکریپت - دریافت سبک ها JavaScript - Getting Styles

• جاوا اسکریپت - رویدادهای فرم JavaScript - Form Events

• جاوا اسکریپت - رویدادهای صفحه کلید JavaScript - Keyboard Events

• جاوا اسکریپت - رویدادهای ماوس JavaScript - Mouse Events

• جاوا اسکریپت - ایجاد عناصر HTML - قسمت 1 JavaScript - Create HTML Elements - Part 1

• جاوا اسکریپت - ایجاد عناصر HTML - قسمت 2 JavaScript - Create HTML Elements - Part 2

• جاوا اسکریپت - به روز رسانی و حذف عناصر HTML JavaScript- Update and Delete HTML Elements

• جاوا اسکریپت - مقدمه ای بر مدل شیء مرورگر JavaScript - Introduction to Browser Object Model

• جاوا اسکریپت - صفحه نمایش و شی ناوبر JavaScript - Screen and Navigator Object

• جاوا اسکریپت - History and Location Object JavaScript - History and Location Object

• JavaScript - Mini-Project 1: Smartwatch Showcase JavaScript - Mini-Project 1: Smartwatch Showcase

• JavaScript - Mini-Project 2: Calculator App JavaScript - Mini-Project 2: Calculator App

• جاوا اسکریپت - مقدمه ای بر عبارات منظم JavaScript - Introduction to Regular Expressions

• جاوا اسکریپت - متا کاراکترها و کلاس های کاراکتر JavaScript - Meta-characters and Character Classes

• JavaScript - Regex Quantifiers JavaScript - Regex Quantifiers

• جاوا اسکریپت - استفاده از Regex در جاوا اسکریپت JavaScript - Using Regex inside JavaScript

• JavaScript - Regex Groups JavaScript - Regex Groups

• جاوا اسکریپت - اعتبار سنجی فرم با استفاده از Regex JavaScript - Form Validation using Regex

• جاوا اسکریپت - مقدمه ای بر برنامه نویسی شی گرا JavaScript - Introduction to Object Oriented Programming

• جاوا اسکریپت - کلمه کلیدی "این". JavaScript - The "this" Keyword

• جاوا اسکریپت - توابع سازنده JavaScript - Constructor Functions

• جاوا اسکریپت - زنجیره وراثت و نمونه اولیه JavaScript - Inheritance and Prototype Chain

• جاوا اسکریپت - پیاده سازی نمونه اولیه JavaScript - Prototype Implementation

• جاوا اسکریپت - درک Frontend و Backend JavaScript - Understanding Frontend and Backend

• جاوا اسکریپت - درخواست و پاسخ HTTP JavaScript - HTTP Request and Response

• جاوا اسکریپت - مقدمه ای بر JSON JavaScript - Introduction to JSON

• جاوا اسکریپت - مقدمه ای بر AJAX JavaScript - Introduction to AJAX

• جاوا اسکریپت - مدیریت پاسخ HTTP JavaScript - Handling HTTP Response

• جاوا اسکریپت - کار با داده های پاسخ HTTP JavaScript - Working with HTTP Response Data

• جاوا اسکریپت - ایجاد درخواست ارسال HTTP JavaScript - Making HTTP Post Requests

جی کوئری jQuery

• jQuery - مقدمه jQuery - Introduction

• jQuery - انتخابگرها و فیلترها jQuery - Selectors and Filters

• jQuery - افزودن/به‌روزرسانی عناصر HTML jQuery - Add/Update HTML Elements

• jQuery - اضافه کردن/به‌روزرسانی سبک‌ها jQuery - Add/Update Styles

• jQuery - مدیریت رویدادهای HTML jQuery - Handling HTML Events

• jQuery - برقراری تماس های AJAX jQuery - Making AJAX Calls

جاوا اسکریپت مدرن (ES6) برای React Modern Javascript (ES6) For React

• ES6 - مقدمه ES6 - Introduction

• ES6 - ایجاد متغیر با استفاده از "let" و "const" ES6 - Variable Creation using "let" and "const"

• ES6 - رشته های الگو ES6 - Template Strings

• ES6 - توابع پیکان ES6 - Arrow Functions

• ES6 - اپراتور استراحت ES6 - Rest Operator

• ES6 - اپراتور Spread ES6 - Spread Operator

• ES6 - تخریب ES6 - Destructuring

• ES6 - توابع آرایه: map() ES6 - Array Functions: map()

• ES6 - توابع پیکان: reduce() ES6 - Arrow Functions: reduce()

• ES6 - توابع پیکان: filter() ES6 - Arrow Functions: filter()

• ES6 - توابع پیکان: find() و findIndex() ES6 - Arrow Functions: find() and findIndex()

• ES6 - مقدمه ای بر کلاس ها ES6 - Introduction to Classes

• ES6 - وراثت در ES6 ES6 - Inheritance in ES6

• ES6 - تماس ها و قول ها ES6 - Callbacks and Promises

• ES6 - کار با Promises ES6 - Working with Promises

• ES6 - Chaining Promises ES6 - Chaining Promises

React JS React JS

• ReactJS - مقدمه ReactJS - Introduction

• ReactJS - درک SPA و MPA ReactJS - Understanding SPAs and MPAs

• ReactJS - ایجاد اولین برنامه React ما ReactJS - Creating our First React App

• ReactJS - ساختار پروژه ایجاد شده توسط CRA ReactJS - Project Structure created by CRA

• ReactJS - مقدمه ای بر JSX ReactJS - Introduction to JSX

• ReactJS - JSX پشت صحنه ReactJS - JSX Behind the Scenes

• ReactJS - اضافه کردن سبک به عناصر React ReactJS - Adding Styles to React Elements

• ReactJS - عناصر React را به صورت پویا ایجاد کنید ReactJS - Create React Elements Dynamically

• ReactJS - ایجاد اولین کامپوننت React ما ReactJS - Creating our First React Component

• ReactJS - انتقال داده به کامپوننت ها با استفاده از Props ReactJS - Passing Data to Components using Props

• ReactJS - واردات و صادرات ماژول ها ReactJS - Import and Export of Modules

• ReactJS - مقدمه ای بر ماژول های CSS ReactJS - Introduction to CSS Modules

• ReactJS - ایجاد اجزای پاسخگو برای موبایل ReactJS - Creating Mobile Responsive Components

• ReactJS - مؤلفه‌های Stateful در مقابل بدون دولت ReactJS - Stateful vs Stateless Components

• ReactJS - ایجاد کامپوننت های مبتنی بر کلاس ReactJS - Creating Class-based Components

• ReactJS - بیشتر در مورد متد setState(). ReactJS - More about setState() Method

• ReactJS - ارسال Props به کامپوننت های مبتنی بر کلاس ReactJS - Passing Props to Class-based Components

• ReactJS - عملکرد عبور به عنوان Props ReactJS - Passing Function as Props

• ReactJS - مشکل تمرین: صفحه جزئیات محصول ReactJS - Practice Problem: Product Details Page

• ReactJS - مشکل تمرین: صفحه جزئیات محصول [راه حل] - قسمت 1 ReactJS - Practice Problem: Product Details Page [Solution] - Part 1

• ReactJS - مشکل تمرین: صفحه جزئیات محصول [راه حل] - قسمت 2 ReactJS - Practice Problem: Product Details Page [Solution] - Part 2

• ReactJS - مشکل تمرین: صفحه جزئیات محصول [راه حل] - قسمت 3 ReactJS - Practice Problem: Product Details Page [Solution] - Part 3

• ReactJS - متد render() - پشت صحنه ReactJS - render() method - Behind the scenes

• ReactJS - Component Lifecycle - Creation ReactJS - Component Lifecycle - Creation

• ReactJS - چرخه حیات کامپوننت - به روز رسانی ReactJS - Component Lifecycle - Updation

• ReactJS - روش چرخه حیات () shouldComponentUpdate ReactJS - shouldComponentUpdate() Lifecycle Method